<template>
    <div class="statement_quantity_box">
        <div class="num_box">
            <div class="title">
                触发次数
                <el-tooltip
                    class="box-item"
                    effect="dark"
                    content="适用员工触发提醒的次数（排除安静模式和不推送日期）"
                    placement="top">
                    <el-icon style="margin-left: 4px; color: #fff; background: #969696; border-radius: 50%">
                        <QuestionFilled />
                    </el-icon>
                </el-tooltip>
            </div>
            <div class="num">{{ numFormat(basic.trigger_times) }}</div>
        </div>
        <div class="num_box">
            <div class="title">
                触发人数
                <el-tooltip class="box-item" effect="dark" content="适用员工超时未回复的人数" placement="top">
                    <el-icon style="margin-left: 4px; color: #fff; background: #969696; border-radius: 50%">
                        <QuestionFilled />
                    </el-icon>
                </el-tooltip>
            </div>
            <div class="num">{{ numFormat(basic.trigger_nums) }}</div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { numFormat } from '@/utils/utils';
import { defineProps } from 'vue';
defineProps(['basic']);
</script>

<style lang="scss" scoped>
.statement_quantity_box {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    padding: 32px 24px;
    border: 1px solid #eaeaea;
    border-radius: 4px;
    margin-bottom: 16px;
    border-bottom: #ffc69e solid 2px;
    background-color: #fff;

    .num_box {
        text-align: left;

        .title {
            display: flex;
            align-items: center;
            font-size: 14px;
            font-family: PingFangSC-Regular, 'PingFang SC';
            font-weight: 400;
            color: #666;
            line-height: 20px;
        }

        .num {
            padding-top: 8px;
            font-size: 30px;
            font-family: HelveticaNeue-Medium, HelveticaNeue;
            font-weight: 500;
            color: #33302d;
            line-height: 36px;
        }
    }
}
</style>
